'use client';

import type { TMetadata } from '@/types';
import { useQuery } from '@tanstack/react-query';
import {
  clientQueryAllMenu,
  queryChildReplyStatistics,
  queryCommentStatistics,
  queryParentReplyStatistics,
  queryReplyStatistics,
} from '@/services/api';
import type {
  IChildReplyStatistics,
  IComment,
  ICommentStatistics,
  IMenu,
  IParentReplyStatistics,
  IReplyStatistics,
} from '@/interfaces';
import NavbarAdminPage from '@/app/[locale]/admin/navbar';
import Alert from '@/app/[locale]/alert/alert';
import PostsReplyAdminPage from '@/app/[locale]/admin/forum/reply/posts';
import AlertLoad from '@/app/[locale]/alert/load';
import { NavbarPage } from '@/app/[locale]/navbar';
import FooterPage from '@/app/[locale]/footer';
import { ReplyAdminContext } from '@/contexts/admin/forum/reply';
import { useState } from 'react';

export default function ReplyAdminPage({ metadata }: { metadata: TMetadata }) {
  return (
    <>
      <NavbarPage metadata={metadata} />
      <ReplyAdmin metadata={metadata} />
      <FooterPage metadata={metadata} />
    </>
  );
}

const ReplyAdmin = ({ metadata }: { metadata: TMetadata }) => {
  const [commentItem, setCommentItem] = useState<IComment>();

  const clientQueryMenusQuery = useQuery(
    metadata.all['menus'].k,
    async (context) => {
      return (await clientQueryAllMenu()) as IMenu[];
    },
    {
      initialData: metadata.all['menus'].v as IMenu[],
    },
  );

  const queryCommentStatisticsQuery = useQuery(
    ['/forum', '/comments', '/statistics'],
    async () => {
      return (await queryCommentStatistics()) as ICommentStatistics;
    },
  );
  const queryReplyStatisticsQuery = useQuery(
    ['/forum', '/replies', '/statistics'],
    async () => {
      return (await queryReplyStatistics()) as IReplyStatistics;
    },
  );
  const queryParentReplyStatisticsQuery = useQuery(
    ['/forum', '/replies', '/statistics', '/parent'],
    async () => {
      return (await queryParentReplyStatistics()) as IParentReplyStatistics;
    },
  );
  const queryChildReplyStatisticsQuery = useQuery(
    ['/forum', '/replies', '/statistics', '/child'],
    async () => {
      return (await queryChildReplyStatistics()) as IChildReplyStatistics;
    },
  );

  if (clientQueryMenusQuery.data) {
    return (
      <ReplyAdminContext.Provider
        value={{ metadata, commentItem, setCommentItem }}
      >
        <div className="container-fluid">
          <div className="vstack gap-4">
            <NavbarAdminPage menus={clientQueryMenusQuery.data} />

            <div className="row">
              <div className="col">
                <div className="card">
                  <div className="card-body">
                    <h6 className="card-subtitle mb-2 text-muted">评论总数</h6>
                    <h5 className="card-title">
                      {queryCommentStatisticsQuery.data?.count || 0}
                    </h5>
                  </div>
                </div>
              </div>
              <div className="col">
                <div className="card">
                  <div className="card-body">
                    <h6 className="card-subtitle mb-2 text-muted">回复总数</h6>
                    <h5 className="card-title">
                      {queryReplyStatisticsQuery.data?.count || 0}
                    </h5>
                  </div>
                </div>
              </div>
              <div className="col">
                <div className="card">
                  <div className="card-body">
                    <h6 className="card-subtitle mb-2 text-muted">
                      下级回复总数
                    </h6>
                    <h5 className="card-title">
                      {queryParentReplyStatisticsQuery.data?.count || 0}
                    </h5>
                  </div>
                </div>
              </div>
              <div className="col">
                <div className="card">
                  <div className="card-body">
                    <h6 className="card-subtitle mb-2 text-muted">
                      下下级回复总数
                    </h6>
                    <h5 className="card-title">
                      {queryChildReplyStatisticsQuery.data?.count || 0}
                    </h5>
                  </div>
                </div>
              </div>
            </div>

            <PostsReplyAdminPage />

            <div></div>
          </div>
        </div>
      </ReplyAdminContext.Provider>
    );
  }

  if (clientQueryMenusQuery.error) {
    return <Alert message={clientQueryMenusQuery.error} type="error" />;
  }

  return <AlertLoad />;
};
